<template>
    <el-card class="box-card">
        <el-row :gutter="10">
            <el-col :span="8">
                <el-card shadow="never" style="background-color: #67C23A;" @click="toWhere('/UserMenageView')">
                    <el-row style="margin-left: 5%;">
                        <el-col :span="8">
                            <span style="font-size: 32px;color: white;">{{ userSum }}</span>&ensp;
                            <span style="color: white;">人</span><br /><br />
                            <span style="font-size: large;color: white;">用户数量</span>
                        </el-col>
                        <el-col :span="12">
                            <el-icon color="white" :size="56">
                                <UserFilled />
                            </el-icon>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card shadow="never" style="background-color: #E6A23C;" @click="toWhere('/DoctorMenageView')">
                    <el-row style="margin-left: 5%;">
                        <el-col :span="12">
                            <span style="font-size: 32px;color: white;">{{ doctorSum }}</span>&ensp;
                            <span style="color: white;">人</span><br /><br />
                            <span style="font-size: large;color: white;">医护人员数量</span>
                        </el-col>
                        <el-col :span="12">
                            <el-icon color="white" :size="56">
                                <FirstAidKit />
                            </el-icon>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card shadow="never" style="background-color: #79bbff;" @click="toWhere('/WorkerMenageView')">
                    <el-row style="margin-left: 5%;">
                        <el-col :span="12">
                            <span style="font-size: 32px;color: white;">{{ workerSum }}</span>&ensp;
                            <span style="color: white;">人</span><br /><br />
                            <span style="font-size: large;color: white;">社区工作者数量</span>
                        </el-col>
                        <el-col :span="12">
                            <el-icon color="white" :size="56">
                                <Avatar />
                            </el-icon>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="8">
                <div class="grid-content ep-bg-purple">
                    <CountRate />
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content ep-bg-purple">
                    <CountSignedup />
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content ep-bg-purple">
                    <ActivitySort />
                </div>
            </el-col>
        </el-row>
    </el-card>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import $axios from '../../../utils/axios'
import { UserFilled, FirstAidKit, Avatar } from '@element-plus/icons-vue'
import CountRate from "./CountRate.vue"
import CountSignedup from './CountSignedup.vue'
import ActivitySort from './ActivitySort.vue'

const router = useRouter()
const toWhere = (command) => {
    router.push(`${command}`)
}

const getSum = async (rId) => {
    const path = '/count/getSum/' + rId
    const { data: res } = await $axios.get(path)
    if (res.code === 200) {
        console.log(res.result);
        return res.result
    }
}

const userSum = ref()
getSum(4).then(sum => {
    userSum.value = sum;
});
const doctorSum = ref()
getSum(3).then(sum => {
    doctorSum.value = sum;
});
const workerSum = ref()
getSum(2).then(sum => {
    workerSum.value = sum;
});

</script>

<style scoped>
.box-card {
    width: 99%;
    height: 94%;
    /* margin-top: 12px; */
    border-radius: 12px;
}

.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}
</style>